<template>
  <div class="company">
    <lyhHeader></lyhHeader>
    <Swiper></Swiper>
    <div class="container">
        <div class="hd">
            <div class="tab-navbar">
                <mt-navbar v-model="selected">
                    <mt-tab-item id="tab-container1">9-21</mt-tab-item>
                    <mt-tab-item id="tab-container2" @click.native="fetch922">9-22</mt-tab-item>
                    <mt-tab-item id="tab-container3" @click.native="fetch923">9-23</mt-tab-item>
                    <mt-tab-item id="tab-container4" @click.native="fetch924">9-24</mt-tab-item>
                </mt-navbar>
            </div>

        </div>
        <div class="tab-container">
            <mt-tab-container v-model="selected">
                <mt-tab-container-item id="tab-container1">
                    <div class="meeting-item" v-for="item in meetinglist" v-bind:key="item.meetingId">
                        <div class="time">{{item.meetingDate | showdate('hm')}}</div>
                        <div class="desc">
                            <div class="title">{{item.meetingName}}</div>
                            <div class="address">{{item.address}}</div>
                            <div class="bar">
                                <a :href="item.videoUrl" v-if="item.videoUrl">
                                    <div class="live-bar btn ">正在直播</div>
                                </a>
                                <div v-else class="live-bar btn " v-bind:class="{ desabled: item.onlyVote == 1 }">正在直播</div>

                                <a :href="item.pptUrl" v-if="item.pptUrl">
                                    <div class="live-bar btn ">日程下载</div>
                                </a>
                                <div class="calc-bar btn" v-bind:class="{ desabled: item.onlyVote == 1 }" @click="goPPT">日程下载</div>                            
                                

                                <a :href="item.voteUrl"><div class="vote-bar btn">投票</div></a>

                            </div>
                        </div>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="tab-container2">
                    <div class="meeting-item" v-for="item in meetinglist2" v-bind:key="item.meetingId">
                        <div class="time">{{item.meetingDate | showdate('hm')}}</div>
                        <div class="desc">
                            <div class="title">{{item.meetingName}}</div>
                            <div class="address">{{item.address}}</div>
                            <div class="bar">
                                <div class="live-bar btn" v-bind:class="{ desabled: item.onlyVote == 1 }">正在直播</div>
                                <div class="calc-bar btn" v-bind:class="{ desabled: item.onlyVote == 1 }">日程下载</div>
                                <a :href="item.voteUrl"><div class="vote-bar btn">投票</div></a>

                            </div>
                        </div>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="tab-container3">
                    <div class="meeting-item" v-for="item in meetinglist3" v-bind:key="item.meetingId">
                        <div class="time">{{item.meetingDate | showdate('hm')}}</div>
                        <div class="desc">
                            <div class="title">{{item.meetingName}}</div>
                            <div class="address">{{item.address}}</div>
                            <div class="bar">
                                <div class="live-bar btn" v-bind:class="{ desabled: item.onlyVote == 1 }">正在直播</div>
                                <div class="calc-bar btn" v-bind:class="{ desabled: item.onlyVote == 1 }">日程下载</div>
                                <a :href="item.voteUrl"><div class="vote-bar btn">投票</div></a>

                            </div>
                        </div>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="tab-container4">
                    <div class="meeting-item" v-for="item in meetinglist4" v-bind:key="item.meetingId">
                        <div class="time">{{item.meetingDate | showdate('hm')}}</div>
                        <div class="desc">
                            <div class="title">{{item.meetingName}}</div>
                            <div class="address">{{item.address}}</div>
                            <div class="bar">
                                <div class="live-bar btn" v-bind:class="{ desabled: item.onlyVote == 1 }">正在直播</div>
                                <div class="calc-bar btn" v-bind:class="{ desabled: item.onlyVote == 1 }">日程下载</div>
                                <a :href="item.voteUrl"><div class="vote-bar btn">投票</div></a>

                            </div>
                        </div>
                    </div>
                </mt-tab-container-item>                
            </mt-tab-container>
        </div>        
    </div>

  </div>
</template>

<script>
import lyhHeader from '@/components/Header.vue'
import Swiper from '@/components/Swiper.vue'
import ajax from '@/ajax/ajax.js'
export default {
  name: 'meeting',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      active: 'tab-container1',
      selected: 'tab-container1',
      meetinglist: [],
      meetinglist2: [],
      meetinglist3: [],
      meetinglist4: []
    }
  },
  watch: {
    selected: function() {
    //   console.log(23)
    }
  },
  components: {lyhHeader, Swiper},
  methods: {
    goCompany () {

    },
    goPPT () {
      this.$router.push({name: 'PPT', params: { pptUrl: '', pptVoteUrl: 'http://www.wenjuan.com', pptDownloadUrl: 'http://www.baidu.com' }})
    },
    fetch922 () {
      if(this.meetinglist2.length > 0) return;
      ajax.post('getsatellitemeetinglist', { "meetingDate": 1474473600 }).then(data => {
        this.meetinglist2 = data.items
      })
    },
    fetch923 () {
      if(this.meetinglist3.length > 0) return;
      ajax.post('getsatellitemeetinglist', { "meetingDate": 1474560000 }).then(data => {
        this.meetinglist3 = data.items
      })
    },
    fetch924 () {
      if(this.meetinglist4.length > 0) return;
      ajax.post('getsatellitemeetinglist', { "meetingDate": 1474646400 }).then(data => {
        this.meetinglist4 = data.items
      })
    }
  },
  fetchData () {

  },
  created () {
    console.log('swiper created')
    ajax.post('getsatellitemeetinglist', {"meetingDate": 1474423200}).then(data => {
      this.meetinglist = data.items
    })

    // var p1 = ajax.post('getsatellitemeetinglist', {"meetingDate": 1474416000})
    // var p2 = ajax.post('getsatellitemeetinglist', {"meetingDate": 1474473600})
    // var p3 = ajax.post('getsatellitemeetinglist', {"meetingDate": 1474560000})
    // var p4 = ajax.post('getsatellitemeetinglist', {"meetingDate": 1474646400})

    // Promise.all([p1, p2, p3, p4]).then(values => {
    //     console.log(values); // [3, 1337, "foo"]
    //     this.meetinglist = values;
    // })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>

    .container {
        .hd {
            // height: 78px;
            background-color: #444556;
            color: #fff;
            text-align: center;
            .title {
                font-size: 18px;
                padding-top: 20px;
                padding-bottom: 12px;
            }
        }

        .mint-navbar{
            background-color: #fff;
            color: #97969c;
            padding: 0 10px;

            .mint-tab-item {
                padding: 15px;
                border-radius: 2px 2px 0 0;
            }
            .mint-tab-item.is-selected {
                border-bottom: 0;
                color: #cd0070;
                background-color: #fff;
                margin-bottom: 0;
            }
        }

        .tab-container {
            background-color: #fff;
        }

        .meeting-item {
            display: flex;
            height: 140px;
            border: 1px solid #d6d6d9 ;
            margin-bottom: 10px;

            .time {
                line-height: 140px;
                border-right: 1px solid #d6d6d9 ;
                width: 70px;
                text-align: center;
                flex: none;
            }

            .desc {
                flex: 1;
                padding: 20px 15px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .title {
                    color: #454566;
                    // margin-bottom: 15px;
                    font-size: 16px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;


                }
                .address {
                    color: #9898a2;
                    // margin-bottom: 13px;
                    font-size: 14px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                }

                .bar {
                    display: flex;
                    justify-content: space-between;
                    .btn {
                        border-radius: 4px;
                        color: #cd0070;
                        border: 1px solid #cd0070;
                        padding: 5px 8px;
                        font-size: 12px;
                        &.desabled {
                            background-color: #eaeaea;
                            border-color: #eaeaea;
                            color: #e1c9d6;
                        }
                    }

                    .live-bar {

                    }
                }

            }

        }
    }



</style>
